<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2025/1/5
  Time: 8:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <title>用户管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet"
          href="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/admin/userMng.css">
    <link rel="stylesheet"
          href="<%=request.getContextPath()%>/static/plugins/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
<!-- 主要内容区域 -->
<div class="main-content">
    <div class="row">
        <!-- 用户管理主要内容 -->
        <div class="col-md-9">
            <!-- 第一部分：搜索和筛选部分 -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="loginName">昵称：</label>
                            <input type="text" class="form-control" id="loginName" placeholder="请输入登录名称">
                        </div>
                        <div class="form-group">
                            <label for="userStatus">用户权限：</label>
                            <select class="form-control" id="userStatus">
                                <option value="1">普通用户</option>
                                <option value="2">管理员</option>
                            </select>
                        </div>

                    </form>
                    <button type="submit" class="btn btn-primary" id="searchButton">查询</button>

                </div>
            </div>
            <!-- 第二部分：用户信息表格 -->
            <div class="row mb-4">
                <div class="col-md-12">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>用户 ID</th>
                            <th>用户名</th>
                            <th>昵称</th>
                            <th>邮箱</th>
                            <th>用户类型</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach var="user" items="${sessionScope.userList}">
                            <tr>
                                <td>${user.userId}</td>
                                <td>${user.username}</td>
                                <td>${user.fullName}</td>
                                <td>${user.email}</td>
                                <td>
                                    <c:choose>
                                        <c:when test="${user.status == '1'}">
                                            <button class="btn btn-success btn-sm">普通用户</button>
                                        </c:when>
                                        <c:when test="${user.status == '2'}">
                                            <button class="btn btn-secondary btn-sm">管理员</button>
                                        </c:when>
                                    </c:choose>
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <!-- 修改 data-toggle="modal" data-target="#exampleModal${user.userId}"-->
                                            <%--                                        <button class="btn btn-sm btn-warning edit-btn"--%>
                                            <%--                                                data-toggle="modal"--%>
                                            <%--                                                data-target="#editUserModal${user.userId}"--%>
                                            <%--                                                data-id="${user.userId}"--%>
                                            <%--                                                onclick="fillEditModal(${user.userId})">修改--%>
                                            <%--                                        </button>--%>
                                        <button class="btn btn-sm btn-warning edit-btn" data-id="${user.userId}">修改
                                        </button>
                                        <button class="btn btn-sm btn-danger delete-btn" data-id="${user.userId}">删除
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 第三部分：分页导航 -->
            <div class="row">
                <c:choose>
                    <c:when test="${totalPages > 1}">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <!-- 上一页按钮 -->
                                <c:if test="${currentPage > 1}">
                                    <li class="page-item">
                                        <a class="page-link"
                                           href="<%=request.getContextPath()%>/admin/userListServlet?startIndex=${(currentPage - 2) * targetTotal}&targetTotal=${targetTotal}"
                                           aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                </c:if>
                                <!-- 动态生成页码 -->
                                <c:forEach var="i" begin="1" end="${totalPages}">
                                    <c:choose>
                                        <c:when test="${i <= 3 || (i > currentPage - 2 && i < currentPage + 2) || i == totalPages}">
                                            <li class="page-item <c:if test="${i == currentPage}">active</c:if>">
                                                <a class="page-link"
                                                   href="<%=request.getContextPath()%>/admin/userListServlet?startIndex=${(i - 1) * targetTotal}&targetTotal=${targetTotal}">${i}</a>
                                            </li>
                                        </c:when>
                                        <c:otherwise>
                                            <!-- 在需要的地方显示 "..." -->
                                            <li class="page-item disabled">
                                                <span class="page-link">...</span>
                                            </li>
                                        </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                                <!-- 下一页按钮 -->
                                <c:if test="${currentPage < totalPages}">
                                    <li class="page-item">
                                        <a class="page-link"
                                           href="<%=request.getContextPath()%>/admin/userListServlet?startIndex=${currentPage * targetTotal}&targetTotal=${targetTotal}"
                                           aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </c:if>
                            </ul>
                        </nav>
                    </c:when>
                    <c:otherwise>
                        <!-- 如果只有一页数据，不显示分页 -->
                        <p></p>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
    </div>
</div>
<!-- 修改用户信息模态框 -->
<!--修改了class fade id ${user.userId}-->
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel"
     aria-hidden="true">

    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editUserModalLabel">修改用户信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editUserForm">
                    <%-- 隐藏用户id，不让客户端修改 --%>
                    <div class="form-group" style="display: none;">
                        <label for="userId">用户id</label>
                        <input type="text" class="form-control" id="userId">
                    </div>
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username">
                    </div>
                    <div class="form-group">
                        <label for="fullName">昵称</label>
                        <input type="text" class="form-control" id="fullName">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="text" class="form-control" id="password">
                    </div>
                    <div class="form-group" style="display: none;">
                        <label for="profilePicture">头像路径</label>
                        <input type="text" class="form-control" id="profilePicture">
                    </div>
                    <div class="form-group">
                        <label for="email">email</label>
                        <input type="text" class="form-control" id="email">
                    </div>
<%--                        只读状态--%>
                        <div class="form-group">
                            <label for="status">状态</label>
                            <select class="form-control" id="status" disabled>
                                <option value="active">普通用户</option>
                                <option value="inactive">管理员</option>
                            </select>
                        </div>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 提示框 -->
<div id="alertMessage" class="alert alert-success" style="display:none;" role="alert">
    用户新增成功！
</div>
<div id="errorMessage" class="alert alert-danger" style="display:none;" role="alert">
    用户新增失败，请重试！
</div>


<!-- 提示框 -->
<div id="editUserMsg" class="alert alert-success" style="display:none"></div>
<script src="<%=request.getContextPath()%>/static/plugins/jquery/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
<script src="<%=request.getContextPath()%>/static/js/util.js"></script>
<script src="<%=request.getContextPath()%>/static/js/admin/userMng.js"></script>
</body>
</html>
